<template>
	<view class="content page">
		<status-bar title='充值'></status-bar>
		<view class="rechMoney">
			<view class="rechTitle">充值金额</view>
			<view class="rechNum">
				<text>￥</text><input type="digit" v-model="inputNum" @input="getRechargeAct" :class="inputNum != ''?'rechInput':'rechNumInput'" placeholder="请输入充值金额"/>
			</view>
			<view class="rechTip" v-if="inputNum != ''">
				<image class="loadingImg" :src="staticUrl+'/images/loading.gif'" v-if="loading" mode=""></image>
				<view v-else>
					<view v-if="RechargeData.aesId != 0">
						充值<text>{{RechargeData.restrict.limit}}元</text>
						赠送<text v-if="RechargeData.type == 8">{{RechargeData.restrict.money}}元</text>
						<text v-if="RechargeData.type == 9">{{RechargeData.restrict.money}}积分</text>
						<text v-if="RechargeData.type == 10">{{RechargeData.typeTitle}}</text>
					</view>
					<view v-if="RechargeData.aesId == 0">{{RechargeData.typeTitle}}</view>
				</view>
			</view>
		</view>
		<view class="rechType rule" v-if="rechData.rechargeRule">
			<view class="rechTitle">充值规则</view>
			<mp-html :content="rechData.rechargeRule" lazy-load scroll-table selectable use-anchor show-with-animation/>
		</view>
		<view class="rechType rechType1">
			<view class="rechTitle">充值方式</view>
			<view class="rechTypeList">
				<!-- #ifdef H5 || MP-WEIXIN -->
				<label class="radio" @click="seleceRadio(1)">
					<view class="fake-radio" :class="checkedSelect == 1?'thmeBorder thmeBg':''" :style="{'--color': color}">
						<text class="icon-xuanzhong iconfont"></text>
						<radio value="1" name="pays" :checked="checkedSelect == 1" />
					</view>
					<image class="pay-ico" :src="staticUrl+'/images/weixinPay.png'" mode="widthFix"></image>
					<view class="radioText">微信支付</view>
				</label>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<label class="radio" @click="seleceRadio(1)">
					<view class="fake-radio" :class="checkedSelect == 1?'thmeBorder thmeBg':''" :style="{'--color': color}">
						<text class="icon-xuanzhong iconfont"></text>
						<radio value="1" name="pays" :checked="checkedSelect == 1" />
					</view>
					<image class="pay-ico" :src="staticUrl+'/images/wx_pay_ico.png'" mode="widthFix"></image>
					<view class="radioText">使用支付宝充值</view>
				</label>
				<!-- #endif -->
			</view>
		</view>
		<view class="submitBtn thmeBg" :class="{active:inputNum==''||isIOS}" :style="{'--color': color}" @click="submits">立即充值</view>
		
		<showModel v-if='showModal' @cancelFunc='closeModel' type='99'
		@certain='closeModel'
		title='充值成功 !' 
		msg='是否继续充值'
		btn3='返回首页' 
		btn2='确定'></showModel>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				
				color: getApp().globalData.color,
				vid:'',
				bid:uni.getStorageSync('bid'),
				staticUrl: this.staticUrl,
				inputNum:'',
				checkedSelect:1,
				rechTip:false,
				loading:true,
				RechargeData:'',
				aesid:'',
				aesverifycode:'',
				pay_type:0,
				showModal:false,
				rechData:'',
				isIOS: false, // 是否ios系统
			}
		},
		onShow(){
			// #ifdef MP-TOUTIAO
				this.pay_type = 6 // 抖音支付宝
				if(this.Systemdata.system.indexOf("iOS") >-1 || this.Systemdata.system.indexOf("IOS") >-1){
					this.isIOS = true
				}
			// #endif
			// #ifdef MP-WEIXIN || H5
				this.pay_type = 1 //微信支付
			// #endif
			
		},
		onShareAppMessage(option) {			
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid + '&pageType=99',
				imageUrl: shareData.imageUrl,
			}		},
		onLoad() {
			that = this
			that.vid = uni.getStorageSync("vid")
			that.getConfig()
		},
		methods:{
			closeModel(){
			    that.showModal = false;
				that.inputNum = ''
				// uni.navigateTo({
				// 	url: "/pages/index/index"
				// })
			},
			seleceRadio(i){
				//选择充值支付方式
				that.checkedSelect = i
				if(that.checkedSelect == 1){
					// #ifdef MP-TOUTIAO
					that.pay_type = 6 // 抖音支付宝
					// #endif
					// #ifdef MP-WEIXIN || H5
					that.pay_type = 1 // 抖音支付宝
					// #endif
				}
			},
			submits(){//立即充值
				// #ifdef MP-TOUTIAO
				if(that.isIOS){
					uni.showToast({
						title:"很抱歉，iOS端暂不提供该功能！",
						icon: 'none'
					})
					return
				}
				// #endif
				if(that.inputNum == ''){
					return
				}
				uni.showLoading({
					title:"请稍后~~"
				})
				that.$http.post({
					url: '/SRA_memberRecharge/recharge',
					data: {
						VeriCode: that.bid,
						vId: that.vid,
						money: that.inputNum,
						aesId: that.aesid,
						aesVerifyCode: that.aesverifycode,
						payType: that.pay_type
					}
				}).then(res => {
					if(res.code == 100){
						var data = res.data;
						// #ifdef H5
							window.location.href ='https://sra.weikebaba.com/index.php/accountPay/weChatCashierPage?orderStr=' + res.data
							return
						// #endif
						// #ifdef MP-TOUTIAO
						tt.login({
							success(res) {
								tt.requestPayment({
									data: {
										app_id: data.app_id,
										method: data.method,
										sign: data.sign,
										sign_type: data.sign_type,
										timestamp: data.timestamp,
										trade_no: data.trade_no,
										merchant_id: data.merchant_id,
										uid: data.uid,
										total_amount: data.total_amount,
										pay_channel: data.pay_channel,
										pay_type: data.pay_type,
										return_url: "/pages/capital/recharge",
										show_url: "",
										risk_info: data.risk_info,
										params: data.params,
									},
									success(res) {
										that.showModal = true
										console.log("成功：")
										console.log(res)
									},
									fail(errs) {
										console.log("失败：")
										console.log(errs)
									},
									complete: () => {
										uni.hideLoading()
									}
								})
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
							uni.getProvider({
								service: 'oauth',
								success: function (resp) {
									console.log(resp.provider)
									if (resp.provider) {
										uni.requestPayment({
											provider:resp.provider[0],
											orderInfo: data,
											timeStamp: data.timeStamp,
											nonceStr: data.nonceStr,
											package: data.package,
											signType: data.signType,
											paySign: data.paySign,
											success:function (res) {
												that.showModal = true
											},
											fail: function (err) {
												console.log('fail:' + JSON.stringify(err));
												// uni.navigateTo({
												// 	url: '/pages/index/orderList?status=0&clickNav=1'
												// })
											},
											complete: function (res) {
												uni.hideLoading()
											}
										})
									}
								}
							})
						// #endif
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			},
			getRechargeAct(){//获取当前充值金额能有的优惠
				that.loading = true
				setTimeout(()=>{
					that.$http.post({
						url: '/SRA_memberRecharge/getRechargeAct',
						data: {
							VeriCode: that.bid,
							vId: that.vid,
							money:that.inputNum,
						}
					}).then(res => {
						if(res.code == 100){
							that.RechargeData = res.data
							that.loading = false
							that.aesid = that.RechargeData.aesId
							that.aesverifycode = that.RechargeData.aesVerifyCode
						} else {
							uni.showToast({
								icon: "none",
								title: res.notice,
								duration: 2000
							})
						}
					})
				},300)
			},
			getConfig(){//获取用户充值配置
				that.$http.post({
					url: '/SRA_memberRecharge/config',
					data: {
						VeriCode: that.bid,
						vId: that.vid,
					}
				}).then(res => {
					if(res.code == 100){
						that.rechData = res.data
					} else {
						uni.showToast({
							icon: "none",
							title: res.notice,
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		height: 100vh;
		color: #333333;
		font-size: 28upx;
	}
	.rechMoney{
		width: 100%;
		height: 240upx;
		background: #FFFFFF;
		border-bottom: 1px solid #e6e6e6;
		padding: 30upx;
		/* margin-bottom: 30upx; */
	}
	.rechNum{margin-top: 30upx;width: 100%;}
	.rechNum text{font-size: 40upx;line-height: 54upx;}
	.rechInput{font-size: 60upx;border: none;background: none;outline: none;width: 94%;float: right;height: 64upx;margin-top: -8upx;}
	.rechNumInput{border: none;background: none;outline: none;width: 94%;float: right;height: 64upx;margin-top: -8upx;}
	.rechType{width: 100%;border-bottom: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;padding: 30upx;background: #FFFFFF;padding-right: 0;padding-bottom: 0;}
	.rechTypeList{width: 100%;margin-top: 30upx;}
	.radio{width: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;padding-bottom: 20upx;}
	.radio .pay-ico{width: 48upx;height: 48upx;margin:0 4upx 0 10upx;}
	.rechTip{text-align: center;color: #999999;width: 100%;margin-top: 30upx;}
	.rechTip text{color: #FF616C;margin: 0 10upx;}
	.submitBtn{width: calc(100% - 60upx);margin: 30upx;padding: 30upx 0;text-align: center;border-radius: 10upx;margin-top: 30upx;color: #FFFFFF;}
	.active{
		background: #DEDEDE!important;color: #949494;
	}
	.rechTypeList:last-child .radioText{border: none;}
	.loadingImg{width: 40upx;height: 40upx;}
	.rule{padding-right: 30upx;padding-bottom: 30upx;border-top: none;color: #949494;}
	.rechType1{margin-top: 30upx;}
</style>
